<template>
  <div class="user-login">
    <layout>
      <template v-slot:title>
        {{ $route.meta.title }}
      </template>
      <template v-slot:main>
        <div class="form">
          <div class="line">
            <span class="cubeic-phone"></span>
            <input placeholder="手机" v-model.trim="user.mobile" />
          </div>
          <div class="line">
            <span class="cubeic-lock"></span>
            <input placeholder="密码" type="password" v-model="user.password" />
          </div>
          <div class="line button">
            <button @click="submit">登 录</button>
          </div>
          <div class="wx" v-show="isWxLogin">
            <div class="image">
              <img src="../../assets/images/wx.png" />
            </div>
            <p class="text">使用微信一键登录</p>
          </div>
        </div>
        <ul class="footer">
          <li @click="$router.push('/user/register')">注册帐号</li>
          <li @click="$router.push('/user/forget')">忘记密码</li>
        </ul>
      </template>
    </layout>
    <loading :show="loading" />
  </div>
</template>

<script>
import Layout from './components/Layout'
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
export default {
  name: 'UserLogin',
  components: {
    Layout,
    Loading
  },
  data() {
    return {
      // user form
      user: {},
      // open wx login
      isWxLogin: false,
      loading: false
    }
  },
  methods: {
    /**
     * Login submit
     */
    submit() {
      // check
      if (this._check()) {
        // login
        this._login().then(() => {
          // redirect
          // if (this.$route.path.indexOf('/user') > -1) {
          //   this.$router.push('/')
          // } else {
          //   this.$router.back()
          // }
          this.$router.push('/center')
          // this.$router.push('/service/subscribe')
        })
      }
    },
    _check() {
      const { mobile, password } = this.user
      if (!mobile) {
        this.$createToast({
          type: 'error',
          txt: '请输入手机号码'
        }).show()
        return false
      }
      if (!password) {
        this.$createToast({
          type: 'error',
          txt: '请输入密码'
        }).show()
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(mobile)) {
        this.$createToast({
          type: 'error',
          txt: '手机号码错误'
        }).show()
        return false
      }
      if (password.length < 6) {
        this.$createToast({
          type: 'error',
          txt: '密码长度不能小于6位'
        }).show()
        return false
      }
      return true
    },
    _login() {
      return new Promise(resolve => {
        this.loading = true
        api.User.login({ ...this.user }).then(response => {
          let { data } = response
          data = base64.parse(data)
          // save token
          this.$store.dispatch('ExecUser/login', data.token).then(() => {
            // get user info
            this.loading = true
            api.User.getInfo().then(response => {
              const info = base64.parse(response.data)
              this.$store.dispatch('ExecUser/set_info', info).then(() => {
                // login done
                this.$createToast({
                  type: 'correct',
                  txt: '登录成功',
                  time: 1000,
                  onTimeout: () => {
                    resolve()
                  }
                }).show()
              })
            }).finally(() => {
              this.loading = false
            })
          })
        }).finally(() => {
          this.loading = false
        })
      })
    },
    /**
     * check wx login
     */
    checkWxLogin() {
      api.User.checkWxLogin().then(response => {
        let { data } = response
        data = !!base64.parse(data)
        if (data) {
          this.isWxLogin = true
        }
      })
    }
  },
  created () {
    this.checkWxLogin()
    // this.loading = true
  }
}
</script>

<style scoped lang="stylus">
.form
  padding 30px
  .line
    height 50px
    //background red
    border-bottom 1px solid #efefef
    margin-bottom 10px
    display flex
    padding-top 15px
    &:last-child
      border none
    &.button
      border-bottom none
    span
      width 50px
      //background red
      color $main_color
      font-size 20px
      padding-top 15px
    input
      flex 1
      //background black
      box-sizing border-box
      margin 10px 0
      &::placeholder
        color $shallow
    button
      width 100%
      height 45px
      border none
      background $main_color
      color white
      font-weight 700
      border-radius 5px
  .wx
    text-align center
    //background red
    padding-bottom 50px
    .image
      height 75px
      padding 15px
    .text
      color $main_color

.footer
  //background red
  text-align center
  li
    display inline-block
    width 100px
    height 16px
    line-height 16px
    //line-height 50px
    //box-sizing border-box
    border-right 1px solid $main_color
    &:last-child
      border none
</style>
